<!--这是编辑分类图片组件-->
<template>
	<div style="padding-bottom: 30px;">
		<p class="filter"></p>
		<div class="addBox">
			<h3><span>编辑</span><p><span style="cursor: pointer;" >-</span><a href="">口</a><span style="cursor: pointer;" @click="close">X</span></p></h3>
			<el-form class="form-container" style="font-size:14px;">
				<div style="margin: 0 20px;height: auto;line-height: 50px;overflow: hidden;">
					<label for="" style="float: left;">分类图片:</label>
					<el-upload style="float: left;"
					  class="upload-demo"
					  ref="upload"
						name="avatar"
					  :action="URLAPI + '/common/goodsCat/imageUpload'"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :file-list="fileList"
						:on-success="handleAvatarSuccess"
						:limit="1"
					  :auto-upload="false">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
					</el-upload>
				</div>
				<p v-if="permission == 3" style="text-align: center;line-height: 70px;"><el-button type="primary" icon="el-icon-edit">保存</el-button><el-button type="info" @click="close">关闭</el-button></p>
			</el-form>
		</div>
	</div>
</template>
<script>
  import { mall_mallInfo } from '@/utils/permission'
  export default {
    data() {
      return {
        permission: 3,
        type: "1",
				gcId: null,
				category: [],
				parentId: 0,
        fileList: [], // 选取的文件
        sort: '', // 顺序号
				name: '', // 名称
				avatar: null,
				URLAPI: process.env.BASE_API
      }
    },
    mounted() {
      this.getModelPermission()
    },
    methods: {
      getModelPermission() {
        this.permission = mall_mallInfo()
      },
      close() {
        this.$emit('hideEdit', false)
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      }
    }
  }
</script>
<style scoped>
	p,h3 {margin:0;padding:0}
	h3{
		font-weight: 500;
		font-size: 14px;
		height: 36px;
		background: #eee;
		border-bottom: 1px solid #ddd;
		padding: 0 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	h3 a{
		padding: 0 10px;
	}
	.filter {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
	}
	.addBox {
		width: 500px;
		height: 300px;
		background: #fff;
		position: absolute;
		left: 25%;
		top: 10%;
		z-index: 110;
	}
	form p {
		margin: 0 20px;
		height: 50px;
		line-height: 50px;
	}
	form label {
		font-weight: 500;
		width: 140px;
		display: inline-block;
	}
</style>
